<template>
	<view class="collection">
		<view class="content">
			<view class="header">
				<span>当前共<span>1</span>件商品</span>
				<span @click="submitClick">
					{{current==1 ? '管理' : '取消'}}
				</span>
			</view>
			<view class="list">
				<view class="item" v-for="index in 10" :key="index">
					<u-checkbox-group v-if="current!=1" v-model="checked">
						<u-checkbox icon-color="#ffffff" activeColor="red" shape="circle" name="1" 
						:checked="checked"></u-checkbox>
					</u-checkbox-group>
					<image src="../../static/logo.png" mode=""></image>
					<view class="data">
						<p>标题-</p>
						<p>￥3.00</p>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom" v-if="current!=1">
			<view class="caozuos">
				<u-checkbox-group activeColor="red" v-model="checked">
					<u-checkbox shape="circle" name="1" :checked="checked" label="全选"></u-checkbox>
				</u-checkbox-group>
				<view class="xiadan">
					<u-button type="primary" style="width:80px;margin-right:10px;"
					  text="取消收藏"></u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked:1,
				current:1
			}
		},
		methods: {
			submitClick(){
				this.current=!this.current
			},
		}
	}
</script>

<style lang="scss" scoped>
.bottom{
	position:fixed;
	bottom:0;
	width:100%;
	border-top: 1px solid #f0f0f0;
	background-color:#ffffff;
	.caozuos{
		display:flex;
		align-items:center;
		padding:10px;
		justify-content:space-between;
		.xiadan{
			display:flex;
			align-items:center;
			p{
				margin-right:10px;
				color:#ff0000;
				font-weight:bold;
				font-size:20px;
			}
		}
	}
}
.collection{
	height:100vh;
	overflow:hidden;
	background-color:#ffffff;
	.content{
		width:95%;
		margin:20rpx auto;
		background-color:#ffffff;
		.header{
			display:flex;
			align-items:center;
			justify-content:space-between;
			padding:10px;
			border-bottom:1px solid #f5f5f5;
		}
		.list{
			height:calc(100vh - 120px);
			overflow-y:auto;
			.item{
				display:flex;
				align-items:center;
				padding:10px;
				image{
					width:140rpx;
					height:140rpx;
				}
				.data{
					line-height:50px;
					margin-left:10px;
					p:nth-child(2){
						color:#ff0000;
					}
				}
			}
			
		}
	}
}
</style>
